<template>
  <draggable v-model="list" class="dragArea list-group" group="people" :item-key="item.id + ''" :list="item.children" :sort="false" :animation="300">
    <template #item="{ element }">
      <div class="list-group-item">
        {{ element.name }}
      </div>
    </template>
  </draggable>
</template>

<script setup lang="ts">
import draggable from "vuedraggable";
import { ref } from "vue";
import type { PropType } from "vue";
import type { LayoutNested } from "#/Nested";
defineProps({
  item: {
    type: Object as PropType<LayoutNested>,
    required: true
  }
});

const list = ref([]);
</script>

<style scoped>
.dragArea {
  background-color: greenyellow;
}
</style>
